<template>
    <div class="d-flex flex-fill flex-column overflow-x-auto fill-width">

        <div class="flex-fill overflow-x-auto">
            <el-table
                    :data="api.tableState.dataSource"
                    border
            >
                <el-table-column label="登录时间" prop="createTime" width="200"/>

                <el-table-column label="显示名称" prop="user" width="200">
                    <template #default="{ row, column, $index }">
                        {{ row.user.realName }}
                    </template>
                </el-table-column>

                <el-table-column label="ip" prop="ip" width="200"/>
                <el-table-column label="信息" prop="message"/>

                <el-table-column fixed="right" label="登录状态" prop="user" width="100">
                    <template #default="{ row, column, $index }">
                        <el-icon class="mr-1">

                            <SuccessFilled v-if="!row.error" color="#409eff"/>
                            <CircleCloseFilled v-else color="#f56c6c"/>
                        </el-icon>
                        {{ !row.error ? "成功" : "失败" }}

                    </template>
                </el-table-column>


            </el-table>
            <div class=" pt-4 d-flex justify-end">
                <el-pagination
                        v-model:current-page="api.tableState.pagination.current"
                        v-model:page-size="api.tableState.pagination.pageSize"
                        :total="api.tableState.pagination.total"
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        @size-change="api.refreshTable()"
                        @current-change="api.refreshTable()"
                />
            </div>
        </div>


    </div>
</template>

<script lang="ts" setup>

import {LoginRecordApi} from "~/api/system/loginRecord/loginRecord";
import {onMounted} from "vue";
import {CircleCloseFilled, SuccessFilled} from "@element-plus/icons-vue";

const api = new LoginRecordApi();

onMounted(() => {
    api.tableState.pagination.pageSize = 10;
    api.onListPage();
});
</script>

<style lang="scss" scoped>

</style>
